{$layout}
{$template "menu"}
{$template "detail_menu"}

<h3>详情 <a :href="'/proxy/waf/update?wafId=' + config.id">修改</a></h3>

<table class="ui table definition selectable">
	<tr>
		<td class="title">名称</td>
		<td>{{config.name}}</td>
	</tr>
	<tr>
		<td>ID</td>
		<td>{{config.id}}</td>
	</tr>
	<tr>
		<td>内置规则分组</td>
		<td class="groups-box">
			<span v-for="group in groups" v-if="group.isChecked" class="ui label tiny">{{group.name}}</span>
			<span v-if="!hasInternalGroups" class="disabled">暂时还没有选择内置的规则分组</span>
		</td>
	</tr>
	<tr v-if="config.actionBlock != null">
		<td>阻止动作配置<em>（Block）</em></td>
		<td>
			<table class="ui table selectable">
				<tr>
					<td class="title">HTTP状态码</td>
					<td>
						<span v-if="config.actionBlock.statusCode == null || config.actionBlock.statusCode.length == 0">-</span>
						<span v-if="config.actionBlock.statusCode != null && config.actionBlock.statusCode.toString().length > 0">{{config.actionBlock.statusCode}}</span>
					</td>
				</tr>
				<tr>
					<td>响应内容</td>
					<td>
						<span v-if="config.actionBlock.body == null || config.actionBlock.body.length == 0">-</span>
						<pre class="block-body"  v-if="config.actionBlock.body != null && config.actionBlock.body.length > 0">{{config.actionBlock.body}}</pre>
					</td>
				</tr>
				<tr>
					<td>URL或文件</td>
					<td>
						<span v-if="config.actionBlock.url == null || config.actionBlock.url.length == 0">-</span>
						<span v-if="config.actionBlock.url != null && config.actionBlock.url.length > 0">{{config.actionBlock.url}}</span>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>匹配条件</td>
		<td>
			<span v-if="config.cond == null || config.cond.length == 0" class="disabled">没有设置匹配条件。</span>
			<div v-if="config.cond != null && config.cond.length > 0">
				<span class="ui label tiny" v-for="cond in config.cond">{{cond.param}} <var>{{cond.operator}}</var> {{cond.value}}</span>
			</div>
		</td>
	</tr>
	<tr>
		<td>是否启用</td>
		<td>
			<span class="ui label tiny green" v-if="config.on">启用</span>
			<span class="ui label tiny" v-if="!config.on">停用</span>
		</td>
	</tr>
	<tr>
		<td>模版更新</td>
		<td>
			<span v-if="newItems == null || newItems.length == 0" class="disabled">暂时还没有模版更新。</span>
			<a href="" v-if="newItems != null && newItems.length > 0" @click.prevent="showUpdates()">有新的模版更新<i class="icon angle" :class="{down:!updatesVisible,up:updatesVisible}"></i> </a>
			<div v-if="newItems != null && newItems.length > 0 && updatesVisible" style="margin-top:0.4em">
				<span v-for="item in newItems" class="ui label small">{{item}}</span>
			</div>
			<div style="margin-top:0.4em" v-if="newItems != null && newItems.length > 0 && updatesVisible">
				<a href="" @click.prevent="mergeTemplate()">[立即更新]</a>
			</div>
			<p class="comment">此功能不会连接互联网，而是直接从安装包里获取。</p>
		</td>
	</tr>
</table>

<h3 style="padding-top:1em">使用此WAF策略的项目</h3>
<p class="comment" v-if="configItems.length == 0" style="padding-top:0">暂时还没有使用此WAF策略的项目。</p>
<table class="ui table selectable" v-if="configItems.length > 0">
	<tr v-for="item in configItems">
		<td v-if="item.type == 'server'">
			<a :href="item.link">{{item.server}} &raquo;</a>
		</td>
		<td v-if="item.type == 'location'">
			<a :href="item.link">{{item.server}} &raquo; {{item.location}} &raquo;</a>
		</td>
	</tr>
</table>